<template>
    <div class="com-container">
        <!-- 柱状图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import { thousandsFormat } from '@/utils/tools';

@Component({
    name: 'BarChart',
})
export default class BarChart extends Vue {
    @Prop() data;
    chartInstance: any = null;

    // 静态触警分组
    emphasisStyle = {
        itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0,0,0,0.3)',
            barBorderRadius: [7, 7, 7, 7],
        },
    };
    // xAxisData: any[] = ['法律法规', '公司规定', '契约规定', '其他法规'];
    xAxisData: any[] = [];

    // data1: any[] = [190, 123, 190, 190];
    // data2: any[] = [80, 80, 80, 80];
    // data3: any[] = [70, 70, 70, 70];
    // data4: any[] = [30, 30, 30, 30];
    data1: any[] = [];
    data2: any[] = [];
    data3: any[] = [];
    data4: any[] = [];

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    mounted() {
        this.initChart();
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            color: ['#fee675', '#5fb2ff', '#f37b8e'],
            legend: {
                data: ['警告', '送审', '禁止'],
                left: 'left',
                icon: 'circle',
                itemHeight: 10, // 修改icon图形大小
                itemWidth: 8,
                itemGap: 10,
                padding: [4, 11],
                selectedMode: false,
                textStyle: {
                    fontSize: 12,
                    fontWeight: 500,
                    color: 'rgba(0,0,0,.65)',
                },
            },
            tooltip: {
                confine: true,
                position: 'top',
                backgroundColor: 'rgba(255,255,255,0.8)',
                borderColor: 'rgba(0,0,0,0.1)',
                textStyle: {
                    color: 'rgba(0, 0, 0, 0.65)',
                },
                formatter: param => {
                    return param.marker + param.seriesName + '&nbsp' + thousandsFormat(param.value) + '条';
                },
            },
            xAxis: {
                data: this.xAxisData,
                splitLine: { show: false },
                splitArea: { show: false },
                axisLine: {
                    lineStyle: {
                        color: '#E9E9E9',
                        width: 1,
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(0, 0, 0, 0.65)',
                    },
                },
                axisTick: {
                    // show: false,
                    inside: true,
                },
            },
            yAxis: {
                // type: 'log',
                splitNumber: 2,
                offset: -11,
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(0,0,0,0.06)',
                        width: 1,
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(0, 0, 0, 0.65)',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#E9E9E9',
                        width: 1,
                    },
                },
            },
            grid: {
                top: 30,
                bottom: 20,
                x: '15%', // x 偏移量
                y: '7%', // y 偏移量
                width: '88%', // 宽度
                height: '55%', // 高度
                left: '10%',
                right: '15%',
            },
            series: [
                {
                    name: '警告',
                    type: 'bar',
                    stack: 'one',
                    emphasis: this.emphasisStyle,
                    data: this.data1,
                    barMinHeight: 1,
                    itemStyle: {
                        barBorderRadius: [3, 3, 3, 3],
                        borderWidth: 2,
                        // borderColor: 'white',
                        borderColor: 'rgb(255,255,255,0.3)',
                    },
                },
                {
                    name: '送审',
                    type: 'bar',
                    stack: 'one',
                    emphasis: this.emphasisStyle,
                    barMinHeight: 1,
                    data: this.data2,
                    itemStyle: {
                        barBorderRadius: [3, 3, 3, 3],
                        borderWidth: 2,
                        // borderColor: 'white',
                        borderColor: 'rgb(255,255,255,0.3)',
                    },
                },
                {
                    name: '禁止',
                    type: 'bar',
                    stack: 'one',
                    emphasis: this.emphasisStyle,
                    data: this.data3,
                    barWidth: 10, // 柱图宽度
                    barMinHeight: 1,
                    itemStyle: {
                        barBorderRadius: [3, 3, 3, 3],
                        borderWidth: 2,
                        borderColor: 'rgb(255,255,255,0.3)',
                    },
                },
                // {
                //     name: 'bar4',
                //     type: 'bar',
                //     stack: 'one',
                //     emphasis: this.emphasisStyle,
                //     data: this.data4,
                //     barWidth: 10, // 柱图宽度
                //     itemStyle: {
                //         barBorderRadius: [4, 4, 4, 4],
                //         borderWidth: 1,
                //         borderColor: 'white',
                //     },
                // },
            ],
        };
        this.chartInstance.setOption(initOption);
    }
    updateChart(e) {
        const dataOption = {
            xAxis: { data: e.xAxisData },
            series: e.data,
        };
        this.chartInstance.setOption(dataOption);
    }
    screenAdapter() {
        const titleFontSize = ((this.$refs.chartDom as any).offsetWidth / 100) * 5.6;
        // 分辨率变化图表配置
        const adapterOption = {
            axisLabel: {
                textStyle: {
                    fontSize: titleFontSize,
                },
            },
            // 柱状条目
            series: [
                {
                    barWidth: titleFontSize,
                },
            ],
        };
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
    }

    destroyed() {
        // window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
